let form = layui.form;
//获取地址栏的id ，这个文章是文章的id
let id = new URLSearchParams(location.search).get('id');


console.log(id);


//获取所有分类渲染到下拉框


$.ajax({
    type: 'GET',
    url: '/my/category/list',
    success: function(res) {
        console.log(res);
        let arr = [];
        res.data.forEach(item => {
            arr.push(`
            <option value="${item.id}">${item.name}</option>`)

        });
        $('select[name=cate_id]').append(arr.join(""));
        form.render('select'); //刷新select选择框渲染

        //根据id可以获取到标题 内容 状态 图片

        $.ajax({
            type: 'GET',
            url: '/my/article/' + id,
            success: function(res) {
                // console.log(res);
                form.val('edit', res.data);
                initEditor();

                //单独回填图片
                console.log(res.data.cover_img);
                image.cropper('destroy').attr('src', baseUrl + '/' + res.data.cover_img).cropper(option);
            }

        })

    }
})

//在线文本编辑器
initEditor();

//创建裁剪区

var image = $('#image')
    // 配置项
var option = {
        aspectRatio: 400 / 280,
        preview: '.img-preview',
        //让裁剪区铺满
        autoCropArea: 1,
    }
    // 创建裁剪区
image.cropper(option);

//点击选择封面按钮触发文件域点击事件
$('button:contains("选择封面")').on('click', function() {
    $('#file').trigger('click');
})

$('#file').on('change', function() {
    // 获取文件列表
    let files = this.files;
    if (files.length > 0) {
        let url = URL.createObjectURL(files[0]);
        //先销毁剪裁区
        image.cropper('destroy').attr('src', url).cropper(option);
    }
})

$('#edit-form').on('submit', function(e) {
    e.preventDefault();
    //收集表单数据
    let fd = new FormData(this);
    //fd对象中没有图片和文本内容，
    // 获取富文本编辑器里的内容，
    fd.set('content', tinyMCE.activeEditor.getContent());
    //裁剪图片
    // 并转换成文件对象形式
    let canvas = image.cropper('getCroppedCanvas', { width: 400, height: 280 });
    // console.log(canvas);
    //把canvas图片转换成二进制形式
    canvas.toBlob(function(blob) {
        //追加到文件对象fd中
        fd.append('cover_img', blob);
        fd.append('id', id);

        // fd.forEach((val, key) => {
        //     console.log(key, val);
        // })
        $.ajax({
            type: 'POST',
            url: '/my/article/update',
            data: fd,
            success: function(res) {
                layer.msg(res.message)
                if (res.status === 0) {
                    // 添加成功，跳转到 文章列表 页面
                    location.href = './booklist.html'
                }
            },
            processData: false,
            contentType: false
        })
    })
})